Vue.component("aui-modal", {
    template: `
        <div class="modal aui-modal fade">
          <div class="modal-dialog" :class="size" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" v-html="title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">                
                <slot></slot>
              </div>
              <div class="modal-footer">
                <slot name="footer"></slot>                              
              </div>
            </div>
          </div>
        </div>    
    `,
    props: {
        title: {
            required: true
        },
        size: {
            required: true,
            default: "modal-md"
        }
    },
    data() {
        var ret = {};
        ret.data = {};
        return ret;
    },
    mounted() {
        var self = this;
        self.anuElement = {};
        self.anuElement.modal = $(self.$el);
        self.anuElement.modal.on('show.bs.modal', function () {
            self.$emit("beforeuishow", self.data);
        });
        self.anuElement.modal.on('shown.bs.modal', function () {
            self.$emit("show", self.data);
        });
        self.anuElement.modal.on('hidden.bs.modal', function () {
            self.$emit("hide", self.data);
        });
    },
    methods: {
        show(data) {
            var self = this;
            self.data = data;
            self.$emit("beforeshow", self.data);
            self.anuElement.modal.modal('show');
        },
        hide() {
            var self = this;
            self.data = {};
            self.$emit("beforehide", self.data);
            self.anuElement.modal.modal('hide');
        }
    }
});